BS Projects - Vue Color Displayer

Welcome to the first of hopefully many itty-bitty projects I’m gonna be releasing as part of my BS (It stands for Byte-Sized, get your head out of the gutter!) projects.

The idea behind these so called BS Projects are to keep me active, learning new tech to mess around with as well as showcase the odd projects here and there that may or may not express my capabilities as a web developer, because let’s face it, coming up with a bunch of robust projects is rather time consuming (simply coming up with the ideas, let alone actually coding them out), so I figure this this is a necessary step if I ever want to put my worth as a developer on display.

Now with all that out of the way, Today, I give you the Vue Color Displayer program/app. Let’s add a bit of context first though, I recently picked up the Vue framework as a means of broadening my JavaScript repertoire, and after hearing a great deal of people I respect sing its praises I couldn’t not have a look at its documentation. I won’t really go into the technically aspects of the framework but what I will say is that its definitely a nice little lightweight alternative to both Angular and React, making it dare I say, the new “Hotness”.

With this project I set out to do one thing, use Vue’s DOM manipulation abilities in a somewhat meaningful way, which lead me to make a color displayer. The cliff notes of this project is more or less, type in a color and its added to an array that Vue processes, adds dynamic styles to and then renders to the DOM for the user to see, and as simplistic as that sounds it does have a fair bit of logic under the hood, such as alerting whether or not the color entered already exists in the database, and a few other bit and bobs. I think it turned out pretty neat, it allowed me to really dig into Vue on a level that I feel pretty confident that I could whip up an actual application using it as my front-end framework in place of react or angular (What would that stack even be called, MEVN? I would love to hear the pronunciation on that one, haha)

I could ramble on all day but that would be pretty antithetical to the spirit of the theme, so I’ll end it with that.

This project can be found lower on this page thanks to the awesomeness of embedded JSFiddles! (which I more or less intend to use for these byte-sized project, well that or Codepen).

I nearly forgot! Before I go (despite me saying I would literally 2 <p> tags ago…), a little sneak peak of the next BS Project I’m gonna put out, I’ve been interested in Data Visualization so be on the look out for my next BS project that will take D3.js for a test run.